<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>

    <link type="text/css" rel="stylesheet" href="css/indexmain.css">
</head>
<body>
<div id="app">

    <!--header-->
    <el-row>
        <el-col :span="18" :offset="3">
            <div class="grid-content bg-purple">
                <img src="img/logo.png" >
                <div class="header">
                    <ul>
                        <li>
                            <a href="login.html" ><div class="icon-nav">
                                <i class="el-icon-user"></i>
                            </div><span class="nav-txt">信息门户</span></a>
                        </li>
                        <li>
                            <a href="/static/reservation.jsp" ><div class="icon-nav">
                                <i class="el-icon-phone-outline"></i>
                            </div><span class="nav-txt">用户预约</span></a>
                        </li>
                        <li>
                            <a href="login.html" ><div class="icon-nav">
                                <i class="el-icon-loading"></i>
                            </div><span class="nav-txt">English</span></a>
                        </li>
                        <li>
                            <a href="login.html" ><div class="icon-nav">
                                <i class="el-icon-search"></i>
                            </div><span class="nav-txt">查询更多</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </el-col>
    </el-row>

    <!--menu-->
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark">
            <el-row>
                <el-col :span="18" :offset="3"><div class="grid-content bg-purple-dark">
                    <div id="menu">
                        <div class="nav">
                            <ul v-for="menu in indexMenu"  :key="menu.id">
                                <li>
                                    <a :href="menu.id==1?menu.titleHref:'/static/template.jsp?id='+menu.id" :title="menu.titleName">{{menu.titleName}}</a>
                                    <div class="two-nav" >
                                        <a v-for="c in menu.children" :href="c.id==1?c.titleHref:'/static/template.jsp?id='+c.id" :title="c.titleName">{{c.titleName}}</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div></el-col>
            </el-row>
        </div></el-col>
    </el-row>

    <!--跑马灯-->
    <el-row>
        <el-col :span="24"><div class="grid-content " >
            <el-carousel indicator-position="outside" height="644px">
                <el-carousel-item v-for="item in imgURL" :key="item">
                    <h3><img :src="item" height="644px"/></h3>
                </el-carousel-item>
            </el-carousel>
        </div></el-col>
    </el-row>

    <%--新闻专项--%>
    <el-row>
        <el-col :span="24" :gutter="20"><div class="grid-content " style="margin-top: 30px">

            <!--新闻专项-->
            <el-col :span="6" :offset="3"><div class="grid-content">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>新闻专项</span>
                        <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
                    </div>
                    <div v-for="o in news" :key="o" class="text item">
                        <el-link :underline="false" :href="'/static/newsMuban.jsp?id='+o.id" target="_blank">{{ o.title }}</el-link>
                    </div>
                </el-card>
            </div></el-col>

            <%--通知公告--%>
            <el-col :span="6"><div class="grid-content bg-purple">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>通知公告</span>
                        <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
                    </div>
                    <div class="block" style="margin: 0 20px">
                        <el-timeline :reverse="false">
                            <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :timestamp="activity.time">
                                <span @click="notices(activity)" style="color: darkorange">
                                    <a>{{activity.title}}</a>
                                </span>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-card>
            </div></el-col>

            <%--medicalFrontier--%>
            <el-col :span="6"><div class="grid-content bg-purple">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>医疗前沿</span>
                        <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
                    </div>
                    <div v-for="o in news2" :key="o" class="text item">
                        <el-link :underline="false" :href="'/static/medicalFrontier.jsp?id='+o.id" target="_blank">{{ o.title }}</el-link>
                    </div>
                </el-card>
            </div></el-col>

        </div></el-col>
    </el-row>

    <!--医院服务-->
    <el-row>
        <el-col :span="24"><div class="grid-content" >
            <div class="con_two">
                <div class="jz">
                    <div class="xy_fw">
                        <div class="xy_fw_nav">
                            <h1>医院 · 服务</h1>
                        </div>
                        <div class="xy_fw_font">
                            <ul>
                                <li><a href="/static/reservation.jsp" title="患者预约系统"
                                       onclick='_addDynClicks("wbimage", 1681657356, 52380)' target="_blank">
                                    <h1 class="post_bg"><img src="img/fw/fw_14.png">
                                    </h1><span class="post"> 预约挂号</span>
                                </a></li>

                                <li><a href="/main.html" title="医院内网"
                                       onclick='_addDynClicks("wbimage", 1681657356, 52367)' target="_blank">
                                    <h1><img src="img/fw/fw_01.png">
                                    </h1><span> 医院内网</span>
                                </a></li>

                                <li><a href="/static/template.jsp?id=4" title="重点科室"
                                       onclick='_addDynClicks("wbimage", 1681657356, 52368)' target="_blank">
                                    <h1><img src="img/fw/fw_02.png">
                                    </h1><span> 重点科室</span>
                                </a></li>

                                <li><a href="/static/template.jsp?id=5" title="专家介绍"
                                       onclick='_addDynClicks("wbimage", 1681657356, 52369)' target="_blank">
                                    <h1><img src="img/fw/fw_03.png">
                                    </h1><span> 专家介绍</span>
                                </a></li>

                            </ul>
                        </div>
                    </div>

                </div>
            </div>

        </div></el-col>
    </el-row>

    <!--footer-->
    <div id="footer">
        <div class="fot_bg">
            <div class="fot_bg_left">
                <p>地 址 : P屏南县古峰镇长汾社区梨园路120号 &nbsp;Address: No. 1, Xianghe Road, Xinzheng, P. R. China<br>邮 编 : 451191
                    &nbsp; &nbsp;招生电话: 0371-62508666 &nbsp; &nbsp;451191 &nbsp; TEL: +86-0371-62508666<br>版权所有 :
                    Copyright©2007-2022 Henan University of Engineering , - 网站地图 - <span><img
                            src="" title="" alt=""
                            width="16" height="16"></span><a href="https://beian.miit.gov.cn/">豫ICP备
                        14017577号-2</a></p>
            </div>
        </div>
        <div class="fot_bg_mid">
            <ul>

                <li><img src="img/fw/wb_img.png"><span>官方微博</span>
                </li>
                <li><img src="img/fw/wx_img.png"><span>官方微信</span>
                </li>

            </ul>
        </div>
        <div class="fot_bg_right">
            <ul>
                <li><a href="" title=""
                       onclick='_addDynClicks("wburl", 1681657356, 59790)'>新闻网</a></li>
                <li><a href="" title=""
                       onclick='_addDynClicks("wburl", 1681657356, 59791)'>招聘网</a></li>
                <li><a href="" title=""
                       onclick='_addDynClicks("wburl", 1681657356, 59792)'>人才引进</a></li>
                <li><a href="" title="" onclick='_addDynClicks("wburl", 1681657356, 59793)'>校历</a></li>
                <li><a href="" title="" onclick='_addDynClicks("wburl", 1681657356, 59794)'>医院地图</a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

    <%--通知弹框--%>
    <el-dialog
            title="通知公告"
            :visible.sync="dialogVisible"
            :before-close="handleClose">
        <h2 style="color: crimson; margin-bottom: 30px">{{oneNotice.title}}</h2>
        <pre style="line-height: 28px; word-wrap: break-word;white-space: pre-wrap;">{{oneNotice.content}}</pre>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            imgURL:['https://www.zdyfy.com/upload/main/generalnotice/48912f1c499d4de8aa5fe48135c7af27_1920_644.jpg',
            'https://www.zdyfy.com/upload/main/generalnotice/381c524221894297bccd1834d34b4659_1920_644.jpg',
            'https://www.zdyfy.com/upload/main/generalnotice/bb9d0860dd014052a05d767ec15385ad_1920_644.jpg',
            'https://www.zdyfy.com/upload/main/generalnotice/51bfd4ce99d4473a8400953303207c8a_1920_644.jpg'],
            // imgURL:['./img/menu/bg_1.jpg','./menu/img/bg_2.jpg','./menu/img/bg_3.jpg','./menu/img/bg_4.jpg'],
            indexMenu:[],
            dialogVisible: false,
            activities: [],
            oneNotice:{},
            news:[],
            news2:[],
        },
        created() {
            this.initMenu();
            this.initNew1();
            this.initNew2();
        },
        methods: {
            initMenu(){
                axios.get("/indexTitle/menu").then(resp=>{
                    this.indexMenu = resp.data.data.menu;
                    this.activities = resp.data.data.notices;
                })
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

            notices(row){
                this.dialogVisible = true;
                this.oneNotice = row;
            },

            initNew1(){
                axios.get("/indexTitle/newkind1").then(resp=>{
                    this.news = resp.data.data;
                })
            },

            initNew2(){
                axios.get("/indexTitle/newkind2").then(resp=>{
                    this.news2 = resp.data.data;
                })
            },

        },
    })
</script>

<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }
    .box-card{
        height: 380px;
    }
</style>
</body>
</html>